<template>
  <div>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="请输入内容" clearable="" v-model="queryInfo.query" @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="add">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-table :data="userList" border stripe>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <!-- scope.row获取这一行的数据 -->
            <el-switch v-model="scope.row.mg_state" @change="userStatusChanged(scope.row)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="showAssignRoleDialog(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <pagination :total="total" :currentPage.sync="queryInfo.pagenum" :pageSize.sync="queryInfo.pagesize" :pageSizes="[2, 4, 6, 10]" @pagination="getUserList" />

      <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[2, 5, 10, 20, 100]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> -->
    </el-card>

    <!-- <add-user-dialog
      :visible="addUserDialogVisible"
      :isEdit="isEdit"
      :id="id"
      @close="close"
    ></add-user-dialog>

    <assig-role-dialog
      :visible="assignRoleDialogVisible"
      :userInfo="userInfo"
      @close="assignRoleDialogClose"
    ></assig-role-dialog> -->
  </div>
</template>

<script>
// import AddUserDialog from './AddUserDialog'
// import AssignRoleDialog from './AssignRoleDialog'
import Pagination from '@/components/Pagination'

export default {
  data() {
    return {
      // 搜索信息
      queryInfo: {
        // 查询关键字
        query: '',
        // 当前页码
        pagenum: 1,
        // 每页显示的条数
        pagesize: 2
      },
      userList: [],
      total: 0,
      // 控制新增用户弹窗的显示和隐藏
      addUserDialogVisible: false,
      // 是否是编辑用户信息
      isEdit: false,
      // 当前修改的用户id
      id: '',
      // 控制分配用户角色弹窗的显示和隐藏
      assignRoleDialogVisible: false,
      // 待分配用户角色的用户
      userInfo: {}
    }
  },
  components: {
    // 'add-user-dialog': AddUserDialog,
    // 'assig-role-dialog': AssignRoleDialog
    Pagination
  },

  created() {
    this.getUserList()
  },

  methods: {
    // 修改用户状态
    async userStatusChanged(userInfo) {
      const res = await this.$axios.put(`/users/${userInfo.id}/state/${userInfo.mg_state}`)
      if (res.meta.status !== 200) {
        // 修改失败,还原缓存中的数据
        userInfo.mg_state = !userInfo.mg_state
        return this.$message.error('修改用户状态失败')
      }
      this.$message.success('修改用户状态成功')
    },

    async getUserList() {
      const { data: res } = await this.$get('/users', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败!')
      }
      this.userList = res.data.users
      this.total = res.data.total
    },

    // pagesize改变
    handleSizeChange(newPageSize) {
      this.queryInfo.pagesize = newPageSize
      this.getUserList()
    },

    // 当前页码修改
    handleCurrentChange(newPageNum) {
      this.queryInfo.pagenum = newPageNum
      this.getUserList()
    },

    // 搜索
    search() {
      this.queryInfo.pagenum = 1
      this.getUserList()
    },

    // 关闭用户弹窗
    close(isRefresh) {
      this.isEdit = false
      this.id = ''
      this.addUserDialogVisible = false
      isRefresh && this.getUserList()
    },

    // 添加用户
    add() {
      this.isEdit = false
      this.addUserDialogVisible = true
    },

    // 编辑用户
    edit(row) {
      this.isEdit = true
      this.id = row.id
      this.addUserDialogVisible = true
    },

    // 显示分配用户角色弹窗
    showAssignRoleDialog(row) {
      this.userInfo = row
      this.assignRoleDialogVisible = true
      console.log(this.assignRoleDialogVisible)
    },

    // 分配用户角色弹窗关闭
    assignRoleDialogClose(isRefresh) {
      this.assignRoleDialogVisible = false
      isRefresh && this.getUserList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
